<template>
  <div class="container">
    <div>
      <el-descriptions
        title="最近测试情况"
        class="custom-descriptions"
        border
        :column="2"
        style="max-height: 18vh; overflow: hidden"
      >
        <el-descriptions-item label="测试名称">{{ name }}</el-descriptions-item>
        <el-descriptions-item label="试题数量">{{
          questionCount
        }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{
          createdAt
        }}</el-descriptions-item>
        <el-descriptions-item label="测试类型">
          <el-tag>{{ type }}</el-tag></el-descriptions-item
        >
      </el-descriptions>
    </div>
    <div>
      <el-card style="max-height: 22vh">
        <div class="warnHeader">测试预警信息</div>
        <el-row
          style="max-height: 13vh; overflow-y: auto; background-color: #f5f5f5"
        >
          <el-col
            :span="12"
            class="warnInfo"
            v-for="s in students"
            :key="s.userId"
          >
            <router-link
              :to="{ path: '/StudentSingle', query: { id: s.userId } }"
            >
              <el-avatar
                :size="50"
                :src="circleUrl"
                style="margin-right: 10px"
              />
              <div>
                学生ID: {{ s.userId }} <br />
                状态: {{ s.passStatus }}
              </div>
            </router-link>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
// 线性同余生成器
function lcg(seed) {
  return function () {
    seed = Math.imul(48271, seed) | 0 % 2147483647;
    return (seed & 2147483647) / 2147483648;
  };
}

export default {
  name: "RecentExamAndWarn",
  props: {
    courseId: String,
  },
  data() {
    return {
      name: "结课考核",
      questionCount: 10,
      createdAt: "2021-12-04",
      type: "试卷",
      students: [],
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    };
  },
  created() {
    const rand = lcg(Number(this.courseId));

    const studentsCount = Math.floor(rand() * (12 - 6 + 1)) + 6;
    const passStatuses = ["未通过", "未参加"];
    this.students = Array.from({ length: studentsCount }, () => ({
      userId: Math.floor(rand() * 95000) + 1,
      passStatus: passStatuses[Math.floor(rand() * passStatuses.length)],
    }));
    // console.log(studentsCount);

    this.questionCount = Math.floor(rand() * (30 - 10 + 1)) + 10;
    const days = Math.floor(rand() * (1238 - 452 + 1)) + 347;
    const date = new Date();
    date.setDate(date.getDate() - days);
    this.createdAt = date.toISOString().split("T")[0];
  },
};
</script>

<style scoped>
.container {
  border: 1px solid #ccc;
  margin: 0 1vh;
  border-radius: 1%;
}

.custom-descriptions {
  background-color: #f5f5f5;
  border-radius: 10px;
  margin: 3px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  padding: 3px;
}

.custom-descriptions:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

h4 {
  text-align: left;
}

a {
  text-decoration: none;
  font: 16px Arial, sans-serif;
  color: rgb(110, 18, 18);
  font-weight: bold;
}

.warnHeader {
  height: 3vh;
  background-color: #fff;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 0.5vh;
}
</style>
